<template>
<div class="storeList-merchant views-container">
   <share-link :config="shareLinkConfig" ref="sharelink">
      <template slot="title">-自助核销二维码</template>
      <template slot="el-form-item">
        <el-form-item label="小程序路径" v-if="shareLinkConfig.params.qrUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="公众号链接" v-if="shareLinkConfig.params.linkUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="短链接" v-if="shareLinkConfig.params.weChat_short_url">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.weChat_short_url" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.weChat_short_url,$event)">复制</el-button>
          </el-input>
        </el-form-item>
      </template>
    </share-link>
    <el-dialog
    width="50%"
    @open="openDilog"
    @close="resetDialogFormData({name: '', mobile:'', address:'',detailed_address:'', lng: '',lat: '',prce: {},city: {},area: {},i:{},
     week: defalutWeek,time: [[nowDate, nowDateEnd]],status: 1, bus_id : $route.query.bus_id,circle_id:'',dis_info:'',store_label:'',coity_id:'',quaimg:[],image:[],video:[]})"
    :visible.sync="dialogTableVisible"
    custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form-dialog dialog-table" v-if="dialogTableVisible">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">{{`${!!formFormatData.api['editForm']['params']['id']?'编辑':'添加'}门店`}}</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <el-form ref="formSub" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-tabs v-model="activeName">
                                  <el-tab-pane label="基础信息" name="first">
                                       <el-form-item label="门店名称" :rules="[{required:true}]">
                                        <el-input v-model.trim="formFormatData.formData.name">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="联系电话" :rules="[{required:true}]">
                                        <el-input v-model.trim="formFormatData.formData.mobile">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="门店地址" class="city">
                                        <div class="flex-row flex-align-c">
                                            <city-select :config="initCityList" ref="cityselect" :changeEvt="formFormatFiltersChange"></city-select>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="详细地址" :rules="[{required:true}]">
                                        <el-input v-model.trim="formFormatData.formData.detailed_address" :maxlength="50">
                                        </el-input>
                                    </el-form-item>
                                    <!-- <el-form-item label="门店描述">
                                        <el-input v-model.trim="formFormatData.formData.store_introduce" :maxlength="50">
                                        </el-input>
                                    </el-form-item> -->
                                    <el-form-item label="营业日期">
                                        <el-checkbox-group v-model="formFormatData.formData.week">
                                            <el-checkbox v-for="day in days" :label="day.label" :key="day.label">{{day.title}}</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                    <el-form-item label="营业时间">
                                        <div class="flex-row">
                                            <div class="flex-col flex-align-c flex-justify-c">
                                                <div v-for="(picker,index) in formFormatData.formData.time" :key="index" v-if="Array.isArray(formFormatData.formData.time[index])" style="margin-bottom:20px;width:100%;">
                                                    <el-time-picker :clearable='false' v-model="formFormatData.formData.time[index][0]" value-format="timestamp" format='HH:mm' placeholder="选择开始时间">
                                                    </el-time-picker>
                                                    <el-time-picker :clearable='false' v-model="formFormatData.formData.time[index][1]" value-format="timestamp" format='HH:mm' placeholder="选择结束时间">
                                                    </el-time-picker>
                                                    <el-button v-if="index === 0" @click="addStorePicker(index)" style="margin-left:10px;align-self: flex-start;" type="text">添加营业时间段</el-button>
                                                    <el-button v-if="index !== 0" @click="delStorePicker(index)" style="margin-left:10px;" type="text">删除</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="营业状态" style="margin-top:-20px;">
                                        <el-switch :active-value="1" :inactive-value="0" v-model="formFormatData.formData.status"> </el-switch>
                                    </el-form-item>
                                    <el-form-item label="地图定位" :rules="[{required:true}]">
                                        <div class="flex-row flex-align-c">
                                            <baidu-map ref="map" :config="initMapList" :changeEvt="formFormatFiltersChange"></baidu-map>
                                        </div>
                                    </el-form-item>
                                  </el-tab-pane>
                                  <el-tab-pane label="门店营销设置" name="second">
                                        <el-form-item label="所属商圈">
                                         <el-select v-model="formFormatData.formData.circle_id" filterable placeholder="请选择">
                                            <el-option v-for="item in categoryData" :key="item.circle_id" :label="item.circle_name" :value="item.circle_id" :disabled="item.default==true"></el-option>
                                          </el-select>
                                          <el-button style="margin-left:10px;" v-if="formFormatData.formData.circle_id" icon="el-icon-delete" circle plain @click="delcircleid"></el-button>
                                    </el-form-item>
                                    <el-form-item label="绑定社群">
                                         <el-select  v-model="formFormatData.formData.coity_id" filterable placeholder="请选择">
                                            <el-option v-for="item in communityData" :key="item.id" :label="item.title " :value="item.id"></el-option>
                                          </el-select>
                                    </el-form-item>
                                    <el-form-item label="门店评分" >
                                          <el-input-number v-model="formFormatData.formData.store_score" :controls="false" :min="1" :max="5" style="width:130px;"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="门店均价">
                                            <!-- <el-input-number v-model="formFormatData.formData.per_capita"  :controls="false" style="width:130px;"></el-input-number> -->

                                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                            <el-input-number v-model="formFormatData.formData.per_capita"  :controls="false" style="width:100px;"></el-input-number>
                                            <div class="wlm-input-append append-right">元</div>
                                          </div>

                                    </el-form-item>
                                    <el-form-item label="添加标签" >
                                          <el-input v-model="formFormatData.formData.store_label" maxlength="2" style="width:190px;"></el-input>
                                          <span class="form-help">标签建议2个字</span>
                                    </el-form-item>
                                    <el-form-item label="门店描述" >
                                          <el-input v-model="formFormatData.formData.store_introduce" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="优惠信息" >
                                          <el-input v-model="formFormatData.formData.dis_info" ></el-input>
                                    </el-form-item>
                                  </el-tab-pane>
                                  <el-tab-pane label="设置/相册" name="third">
                                       <el-form-item label="门店视频封面" ref="merchantlog">
                                             <choose-files ref="chooseFiles" :config="chooseVideostyletConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                            <div class="form-help" >视频封面建议尺寸640*320</div>
                                    </el-form-item>
                                    <el-form-item label="门店视频" ref="merchantlog">
                                              <choose-files ref="chooseFiles" :config="chooseVideoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                            <div class="form-help" >视频为横向视频，视频比例4:3</div>
                                    </el-form-item>

                                    <el-form-item label="门店相册" >
                                        <choose-files ref="chooseFiles" :config="chooseStoreConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                         <div class="form-help" >视频封面建议尺寸630*466</div>
                                    </el-form-item>
                                  </el-tab-pane>
                                </el-tabs>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" @click="saveFrom" type="primary">保存</el-button>
        </footer>
    </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <el-button size="small" type="primary" @click="dialogTableVisible = true">添加门店</el-button>
        </div>
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.userTable.files" size="small" label-width="80px" class="retail-form" label-position="right">
                <el-form-item label="门店名称：" class="search">
                    <el-input v-model="tableFormatData.userTable.files.name" placeholder="请输入门店名称" style="width:160px;"></el-input>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button v-waves type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->
                 <el-table-column label="门店ID" >
                    <template slot-scope="scope">
                        {{scope.row.id}}
                    </template>
                </el-table-column>
                <el-table-column label="门店名称" >
                    <template slot-scope="scope">
                        {{scope.row.name}}
                    </template>
                </el-table-column>
                <el-table-column label="所属商圈" >
                    <template slot-scope="scope">
                          {{scope.row.circle_store&&scope.row.circle_store.circle?scope.row.circle_store.circle.circle_name:''}}
                    </template>
                </el-table-column>
                <el-table-column label="评分/人均价" >
                    <template slot-scope="scope">
                     <div>评分：<span>{{scope.row.store_score}}</span></div>
                     <div>均价：<span>{{scope.row.per_capita}}</span></div>
                    </template>
                </el-table-column>

                <el-table-column label="绑定社群" >
                    <template slot-scope="scope">
                        {{scope.row.title}}
                    </template>
                </el-table-column>
                <el-table-column label="优惠信息" >
                    <template slot-scope="scope">
                         <!-- <el-input v-model.trim="formFormatData.formData.dis_info" ></el-input> -->
                         {{scope.row.dis_info}}
                    </template>
                </el-table-column>
                <el-table-column label="店员数量" >
                    <template slot-scope="scope">
                        <!-- <span>{{scope.row.menum}}</span> -->
                        <router-link tag="span" :to="{path:'/merchant/merchantClerkList', query :{ store_id:scope.row.id, bus_id: $route.query.bus_id}}">
                            <span class="pointer">{{scope.row.menum}}</span>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column label="营业状态" >
                    <template slot-scope="scope">
                        <el-switch :active-value="1" :inactive-value="0" @change="changeTableItem({id:scope.row.id,status:scope.row.status},formFormatData.api.change.status)" v-model="scope.row.status"> </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="400px">
                    <template slot-scope="scope">
                        <div class="operation-group">
                               <el-button class="wlm-text" type="text" @click="sharelink(scope.row.id)">自助核销二维码</el-button>
                              <router-link class="wlm-text" tag="a" target="_blank" :to="{path:'/merchant/storeListMerchantAdd', query :{ 
                                id:scope.row.id,
                                store_user_id:$route.query.store_user_id?$route.query.store_user_id:'',
                  h_aid:$route.query.h_aid?$route.query.h_aid:'',}}">
                                 <el-button class="wlm-text" type="text">编辑</el-button>
                              </router-link>

                            <!-- <el-button class="wlm-text" type="text" @click="formFormatDialogEditEvt({id:scope.row.id,toggle:'dialogTableVisible'});">编辑</el-button> -->
                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <!-- <el-row class="pagination-btns">
                    <el-checkbox class="check-all" true-label="1" false-label="0" v-model="tableFormatData.userTable.files.checkall" @change="toggleSelection">全部</el-checkbox>
                    <el-button class="right-8" :disabled="isGroup" size="mini" @click="delTableList">删除</el-button>
                </el-row> -->
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import BaiduMap from '@/components/BaiduMap/index'
import CitySelect from '@/components/CitySelect/index'
import clipboard from '@/utils/clipboard'
import ShareLink from '@/components/ShareLink/index'
import ChooseUser from '@/components/ChooseUser/index' // Waves directive
import ChooseFiles from '@/components/ChooseFiles/index'
import {
  shopEdit,
  shopGet,
  shopDelete,
  shopIndex,
  storeStatus,
  getCircle,
  getStoreQr
} from '@/api/merchant'
import {
  communityList
} from '@/api/merchandise'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'UserPlatform',
  components: {
    BaiduMap,
    CitySelect,
    ChooseUser,
    ChooseFiles,
    ShareLink
  },
  computed: {

  },
  directives: {
    waves
  },
  data() {
    const nowDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDay(), 0, 0).getTime()
    const nowDateEnd = new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDay(), 23, 59).getTime()

    return {
      shareLinkConfig: {
                current: 'weChatQr',
                params: {
                  weChat_short_url:'',
                    qrUrl: '',
                    linkUrl: '',
                    weChatQr: '',
                    appQr: ''
                }
            },
      activeName: 'first',
      defaultActive: '1',
      nowDate,
      categoryData: [],
      communityData: [],
      nowDateEnd,
      defalutWeek: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
      dialogTableVisible: false,
      initChooseUser: {},
      checkedDays: [],
      initMapList: {
        initList: [
          //   { 'name': 'lng', 'value': 116.404288 },
          //   { 'name': 'lat', 'value': 39.918242 }
        ],
        bindKey: { key: [{ 'name': 'lng', type: 'String' }, { 'name': 'lat', type: 'String' }, { 'name': 'address', type: 'String' }], model: 'map' }
      },
      initCityList: {
        initList: [
          //   { id: '130000', value: '河北省' },
          //   { id: '130100', value: '石家庄市' },
          //   { id: '130102', value: '长安区' }
        ],
        bindKey: { key: [{ 'name': 'prce', type: 'String' }, { 'name': 'city', type: 'String' }, { 'name': 'area', type: 'String' }], model: 'address' }
      },
      days: [{
        title: '星期一',
        label: 'monday'
      }, {
        title: '星期二',
        label: 'tuesday'
      }, {
        title: '星期三',
        label: 'wednesday'
      }, {
        title: '星期四',
        label: 'thursday'
      }, {
        title: '星期五',
        label: 'friday'
      }, {
        title: '星期六',
        label: 'saturday'
      }, {
        title: '星期天',
        label: 'sunday'
      }],
      platformConfig: {
        type: ['image'],
        initList: []
      },
      chooseVideostyletConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      chooseVideoConfig: {
        type: ['video'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'video',
        bindKey: {
          key: 'video',
          model: 'video'
        }
      },
      chooseStoreConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 5,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'quaimg',
          model: 'img'
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: shopGet,
            params: {
              bus_id: this.$route.query.bus_id
            },
            filters: {
              address: {
                bindInit: ['initCityList']
              },
              map: {
                bindInit: ['initMapList']
              },
              img: {
                bindInit: ['chooseVideostyletConfig', 'chooseStoreConfig']
              },
              video: {
                bindInit: ['chooseVideoConfig']
              }
            }
          },
          change: {
            status: {
              key: 'status',
              api: storeStatus
            }
          },
          submitForm: shopEdit
        },
        formData: {
          quaimg: [],
          image: [],
          video: [],
          circle_id: '',
          name: '',
          mobile: '',
          address: '',
          lng: '',
          lat: '',
          detailed_address: '',
          bus_id: this.$route.query.bus_id,
          prce: {},
          city: {},
          area: {},
          week: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
          time: [[nowDate, nowDateEnd]],
          status: 1,
          store_score: '', // 评分
          per_capita: '', // 人均
          store_introduce: '', // 门店介绍
          coity_id: this.coity_id != 0 ? this.coity_id : '', // 社群id
          store_label: '', // 标签
          dis_info: '' // 优惠信息

        },
        rules: {
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: shopIndex,
            delList: shopDelete
          },
          tableData: [],
          files: {
            name: '',
            ids: [],
            is_page: 1,
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  created() {
    this.getcircles()
    this.community()
  },
  methods: {
    // chanbtn(id){
    //   this.dialogListVisibleli = true
    //   getStoreQr({bus_id:this.$route.query.bus_id,store_id:id}).then(res=>{
    //     console.log("s++++++++++++++++++++++++",res)
    //   })
    // },
    //   推广
    delcircleid(){
      this.formFormatData.formData.circle_id=''
    },
         sharelink(id) {
            getStoreQr({bus_id:this.$route.query.bus_id,store_id:id}).then((response) => {
                const { data: { data: { weChat_qrcode, wxApp_qrcode, weChat_url, wxApp_url, url,weChat_short_url } } } = response
                this.shareLinkConfig.params.qrUrl = wxApp_url
                this.shareLinkConfig.params.linkUrl = weChat_url
                this.shareLinkConfig.params.weChatQr = weChat_qrcode
                this.shareLinkConfig.params.appQr = wxApp_qrcode
                this.shareLinkConfig.params.url = url
                this.shareLinkConfig.params.weChat_short_url = weChat_short_url
                this.shareLinkConfig.current = weChat_qrcode ? 'weChatQr' : weChat_qrcode ? 'appQr' : ''
            })
            this.$refs.sharelink.toggle()
            },
            handleClipboard(text, event) {
                clipboard(text, event)
                },
    openDilog() {
      this.formFormatData.formData.video = []
    },
    btnst() {
      console.log(123)
    },
    getcircles() {
      getCircle().then(res => {
        const { data: { data: msgData = [] } } = res
        this.categoryData = msgData
      })
    },
    community() {
      communityList({ list_rows: 'all' }).then(res => {
        // console.log("res",res)
        const { data: { data: msgData = [] } } = res
        this.communityData = msgData
      })
    },

    addStorePicker() {
      this.formFormatData.formData.time.push([this.nowDate, this.nowDateEnd])
    },
    delStorePicker(index) {
      this.formFormatData.formData.time.splice(index, 1)
    },
    saveFrom() {
      if (!this.formFormatData.formData.prce.id || !this.formFormatData.formData.city.id ||
      !this.formFormatData.formData.area.id || !this.formFormatData.formData.address ||
       !this.formFormatData.formData.detailed_address || !this.formFormatData.formData.mobile) {
        this.$message.error('表单数据有误，请确认并修改后重新提交')
      } else {
        this.formFormatSubmit()
        // this.$router.go(0)
      }
      this.formFormatData.formData.video = []
    },
    formFormatCallBack(data, type, response) {
      console.log(data, type, response)
      if (type === 'editForm') {
        const { time } = data
        if (!Array.isArray(time[0])) {
          this.formFormatData.formData.time = [[this.nowDate, this.nowDateEnd]]
        }
      }
    },
    clickbtn() {
      this.formFormatData.formData.video = []
    }
  }

}
</script>
<style lang="scss" scoped>
    .append-right{
    border-right-color: #dcdfe6;

  }

      .form-help{
        color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
  }
  .append-right{
    border-right-color: #dcdfe6;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }
  .wlm-input-append{
        height: 32px;
        white-space: nowrap;
        padding: 0 13px;
        text-align: center;
        line-height: 32px;
        background: #f5f7fa;
        border: 1px solid #dcdfe6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-right-color: transparent;
        border-left-color: transparent;
        color: #909399;
        position:relative;
        right: -125px;
    }
    .input-slot{
    /deep/ .el-input__inner{
      width: 227px;
    }
  }
</style>
